jQuery事件 | 您所在的位置:网站首页 › jquery mousedown 冒泡 › jQuery事件 |
冒泡
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题。例如: 如果document、div、input三个元素绑定了同一个事件,就会产生冒泡: $(document).click(function(){ alert("document"); }); $("div").click(function(){ alert("div"); }); $(":button").click(function(){ alert("button"); });当点击button时,会先弹出button、然后是div、然后是document 阻止冒泡event.stopPropagation() : 所有上层的冒泡行为都将被取消 $(document).click(function(){ alert("document"); }); $("div").click(function(e){ e.stopPropagation(); alert("div"); }); $(":button").click(function(e){ e.stopPropagation(); alert("button"); }); 阻止默认行为默认行为,常见的是点击超链接时的跳转,表单的提交,鼠标右击的系统菜单等等。 preventDefault():阻止默认行为 阻止超链接的跳转: $("a").click(function(e){ e.preventDefault(); });阻止表单的提交: $("form:eq(0)").submit(function(e){ e.preventDefault(); });阻止鼠标右键(contextmenu表示鼠标右键事件): $( document ).contextmenu(function(e) { e.preventDefault(); });PS: contextmenu表示鼠标右键事件,用法与一般事件相同: $(document).bind("contextmenu",function(){alert("鼠标右键")}); // 等效于: $(document).contextmenu(function(e) { alert("鼠标右键"); }); 阻止冒泡并阻止默认行为同时使用preventDefault()和stopPropagation()函数 $("a").click(function(e){ e.preventDefault(); e.stopPropagation(); });或者,直接使用return false $("a").click(function(e){ return false; }); 其他函数目前已经用过的函数有两个: - preventDefault() 取消某个元素的默认行为 - stopPropagation() 取消事件冒泡 另外还有几个相关的函数: - isDefaultPrevented() : 判断是否调用了 preventDefault()方法 - isPropagationStopped() : 判断是否调用了 stopPropagation()方法 - stopImmediatePropagation() : 取消事件冒泡,并取消该事件的后续事件处理函数 - isImmediatePropagationStopped() : 判断是否调用了 stopImmediatePropagation()方法 stopImmediatePropagation()取消冒泡,并阻止后续事件。例如: $(":submit").click(function(e){ e.stopImmediatePropagation(); //e.stopPropagation(); alert("1"); }); $(":submit").click(function(){ alert("2"); });如果使用stopPropagation()那么会取消冒泡,但是仍然后弹出两次。如果使用stopImmediatePropatation()那么不但会取消冒泡,还会取消后续绑定的事件。 |
CopyRight 2018-2019 实验室设备网 版权所有 |